<template>
	<div>
		<!--
			<h1 v-text="msg" id="title"></h1> document.getElementById() 原生Js，获取的是 dom结构
		-->
		<hr class="two" />
		<h2>==== RefAttributes 操作Dom（id的替代者） ===</h2>
		<h4 v-text="msg" ref="title"></h4>
		<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
		<School ref="sch"/>
		<p>
			1. 被用来给元素或子组件注册引用信息（id的替代者）
			<br />
			2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
		</p>


	</div>
</template>

<script>
//引入School组件
import School from './School'

export default {
	name: 'RefAttributes',
	components: {School},//子组件
	data() {
		return {
			msg: '欢迎学习Vue！'
		}
	},
	methods: {
		showDOM() {
			console.log(this.$refs.title) //真实DOM元素
			console.log(this.$refs.btn) //真实DOM元素
			console.log(this.$refs.sch) //School组件的实例对象（vc），给谁打ref，就拿谁
		}
	},
}
</script>
